<!--  import uCharts from '../../static/u-charts.js'-->
<template>
	<view>
		<canvas canvas-id="AlfEdBqcAdUehFVTZnFXSquFvmgunHKJ" id="AlfEdBqcAdUehFVTZnFXSquFvmgunHKJ" class="charts"
			@touchend="tap" />
	</view>
</template>

<script>
	import uCharts from '../../static/u-charts.js'
	var uChartsInstance = {};
	export default {
	  data() {
	    return {
	      cWidth: 750,
	      cHeight: 500
	    };
	  },
	  onReady() {
	    //这里的 750 对应 css .charts 的 width
	    this.cWidth = uni.upx2px(750);
	    //这里的 500 对应 css .charts 的 height
	    this.cHeight = uni.upx2px(500);
	    this.getServerData();
	  },
	  methods: {
	    getServerData() {
	      //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	        let res = {
	            series: [
	              {
	                name: "正确率",
	                color: "#2fc25b",
	                data: 0.8
	              }
	            ]
	          };
	        this.drawCharts('AlfEdBqcAdUehFVTZnFXSquFvmgunHKJ', res);
	      }, 500);
	    },
	    drawCharts(id,data){
	      const ctx = uni.createCanvasContext(id, this);
	      uChartsInstance[id] = new uCharts({
	        type: "arcbar",
	        context: ctx,
	        width: this.cWidth,
	        height: this.cHeight,
	        series: data.series,
	        animation: true,
	        background: "#FFFFFF",
	        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        padding: undefined,
	        title: {
	          name: "80%",
	          fontSize: 35,
	          color: "#2fc25b"
	        },
	        subtitle: {
	          name: "正确率",
	          fontSize: 25,
	          color: "#666666"
	        },
	        extra: {
	          arcbar: {
	            type: "default",
	            width: 12,
	            backgroundColor: "#E9E9E9",
	            startAngle: 0.75,
	            endAngle: 0.25,
	            gap: 2,
	            linearType: "custom"
	          }
	        }
	      });
	    },
	    tap(e){
	      uChartsInstance[e.target.id].touchLegend(e);
	      uChartsInstance[e.target.id].showToolTip(e);
	    }
	  }
	};
</script>

<style scoped>
	.charts {
		width: 750rpx;
		height: 500rpx;
	}
</style>
